<!DOCTYPE html>
<html>
<head>
  <title>CQRS - Bookstore</title>
  <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css"
        rel="stylesheet"/>
</head>
<body>

<div class="container" style="width:80%">
  <div class="navbar navbar-inverse">
    <div class="navbar-inner">
      <div class="container-fluid">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#" name="top">CQRS Bookstore Admin</a>

        <div class="nav-collapse collapse">
          <ul class="nav">
            <li class="active"><a href="#" id="nav-list-orders"><i class="icon-envelope icon-white"></i>
              Orders</a></li>
            <li class="divider-vertical"></li>
            <li><a href="#" id="nav-list-events"><i class="icon-align-justify icon-white"></i> Events</a>
            </li>
            <li class="divider-vertical"></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div id="list-orders">
    <div class="well">
      <table class="table">
        <thead>
        <tr>
          <th>OrderId</th>
          <th>Customer</th>
          <th>Total price</th>
          <th>Status</th>
          <th style="width: 36px;"></th>
        </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
  </div>

  <div id="list-events">
    <div class="well">
      <table class="table">
        <thead>
        <tr>
          <th>Type</th>
          <th>Data</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
      </table>
    </div>
  </div>

</div>

<!-- Latest compiled and minified JavaScript -->

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

<!-- Load all books -->
<script language="javascript">

  var orderServiceRootUrl = "http://localhost:8070/service";

  jQuery(document).ready(function () {
    $("#list-events").hide();
    initNavigation();
    getAllOrders();
  });

  function initNavigation() {

    $('#nav-list-orders').click(function () {
      $('#nav-list-orders').closest('li').addClass("active");
      $('#nav-list-events').closest('li').removeClass("active");
      $("#list-events").hide();
      $("#list-orders").show();
      getAllOrders();
      return false;
    });

    $('#nav-list-events').click(function () {
      $('#nav-list-orders').closest('li').removeClass("active");
      $('#nav-list-events').closest('li').addClass("active");
      $("#list-orders").hide();
      $("#list-events").show();
      getAllEvents();
      return false;
    });
  }

  function renderOrders(data) {
    var list = data == null ? [] : (data instanceof Array ? data : [data]);
    $('#list-orders').find("tbody tr").remove();
    $.each(list, function (index, order) {
      var orderId = order.orderId.id;
      var itemId = 'activate-order-' + orderId;
      var customerName = order.customerName;
      var orderAmount = order.orderAmount;
      var status = order.status;
      var activationButton = status == 'PLACED' ? '<button class="btn-small btn-success" id="' + itemId + '">Activate</button>' : '';
      $('#list-orders').find("tbody")
          .append('<tr><td>' + orderId + '</td>' +
              '<td>' + customerName + '</td>' +
              '<td>' + orderAmount + '</td>' +
              '<td id=status-' + orderId + '>' + status + '</td>' +
              '<td>' + activationButton + ' </td></tr>');
    });
  }


  function getAllEvents() {
    $.getJSON(orderServiceRootUrl + "/query/events", function (data) {
      renderEvents(data);
    });
  }

  function renderEvents(data) {
    var list = data == null ? [] : (data instanceof Array ? data : [data]);
    $('#list-events').find("tbody tr").remove();
    $.each(list, function (index, event) {
      $('#list-events').find("tbody")
          .append('<tr><td>' + event[0] + '</td>' +
              '<td>' + JSON.stringify(event[1], undefined, 2) + '</td></tr>');
    });
  }

  $(document).on("click", "#list-orders button", function () {
    var buttonId = this.id;
    var orderId = buttonId.replace("activate-order-", "");
    postJSON(orderServiceRootUrl + "/order-requests/activations", JSON.stringify({"orderId": orderId }))
        .error(function (data) {
          alert("Error: " + data);
        })
        .done(function (data) {
          $("#" + buttonId).remove();
          $("#status-" + orderId).text("ACTIVATED");
        });
  });

  function getAllOrders() {
    $.getJSON(orderServiceRootUrl + "/query/orders", function (data) {
      renderOrders(data);
    });
  }

  function postJSON(url, data, callback) {
    return $.ajax({
      'type': 'POST',
      'url': url,
      'contentType': 'application/json',
      'data': data,
      'dataType': 'json',
      'success': callback
    });
  }

</script>

</body>
</html>